<template>
  <div>
    <px-dialog v-model="visible" class="equip-dialog-wrap" title="搜索设备" width="1280px" @open="openDialog" @close="closeDialog">
      <div class="equip-dialog-content">
        <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
          <px-row :gutter="16">
            <px-col :span="8">
              <px-form-item label="设备编号/名称">
                <px-input
                  v-model="queryParams.value"
                  placeholder="设备编号/名称"
                  maxlength="50"
                  clearable
                  @blur="queryParams.value = $event.target.value.trim()"
                />
              </px-form-item>
            </px-col>
            <px-col :span="6">
              <div class="equip-dialog-btn">
                <px-button type="primary" @click="queryTable">查询</px-button>
                <px-button @click="resetTable">重置</px-button>
              </div>
            </px-col>
          </px-row>
        </px-form>
        <px-table
          ref="EquipTableRef"
          :data="tableData"
          class="equip-table"
          size="small"
          height="292"
          border
          :header-cell-class-name="allSelectDisable"
          @select="selectChange"
          @select-all="selectChange"
        >
          <px-table-column type="selection" width="40" align="center" />
          <px-table-column
            v-for="(item, index) in tableColumns"
            :key="index"
            :label="item.label"
            :min-width="item.minWidth"
            :align="item.align"
            :show-overflow-tooltip="item.showOverflowTooltip"
            :fixed="item.fixed"
          >
            <template #default="scope">{{
              scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
            }}</template>
          </px-table-column>
        </px-table>
        <pagination
          v-show="total > 0"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @pagination="queryTable"
        />
        <div style="margin-top: 16px; text-align: right">
          <px-button @click="closeDialog">取消</px-button>
          <px-button type="primary" @click="handleSubmit">确定</px-button>
        </div>
      </div>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
import { queryToolLedger } from "@/api/erc/equip";
import { PxMessage } from "px-ui";
import { computed, reactive, toRefs } from "vue";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeEquipDialog", "changeEqpId"]);
// 父级传过来的值
const props = defineProps(["visible", "multiple", "facCode"]);
const visible = computed(() => props.visible);
// 页面本身的值
const state = reactive<any>({
  queryParams: {
    value: "",
    pageNum: 1,
    pageSize: 10
  },
  tableColumns: [
    { prop: "eqpId", label: "设备编码", minWidth: "120", showOverflowTooltip: true },
    { prop: "eqpName", label: "设备名称", minWidth: "120", showOverflowTooltip: true },
    { prop: "facName", label: "设备所属地块", minWidth: "120", showOverflowTooltip: true },
    { prop: "specification", label: "规格型号", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "positionNameAll", label: "设备安装位置", minWidth: "160", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  EquipTableRef: null,
  selectRow: {}
});
const { queryParams, tableColumns, tableData, total, EquipTableRef, selectRow } = toRefs(state);
// 查询设备列表
const queryTable = async () => {
  queryParams.value.facCode = props.facCode;
  const params = queryParams.value;
  const data = await queryToolLedger(params);
  tableData.value = data.data || [];
  total.value = data.total;
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  queryParams.value.value = "";
  queryTable();
};
// 样式上隐藏全选
const allSelectDisable = ({ columnIndex }) => {
  if (columnIndex === 0 && !props.multiple) {
    return "allSelectDisable";
  }
};
// 表格多选框选中
const selectChange = (val, row) => {
  // 1、多选
  if (props.multiple) {
    return (selectRow.value = [...val]);
  }
  // 2、单选
  if (val.length > 1) {
    selectRow.value = row;
    EquipTableRef.value.clearSelection();
    EquipTableRef.value.toggleRowSelection(row, true);
  } else {
    selectRow.value = row;
  }
};
// 确定选择设备
const handleSubmit = () => {
  if (selectRow.value && !selectRow.value.eqpId && selectRow.value.length === 0) {
    PxMessage.warning("请选择设备");
    return;
  }
  emits("closeEquipDialog");
  emits("changeEqpId", selectRow.value);
};

// 打开弹窗
const openDialog = () => {
  selectRow.value = {};
  queryParams.value = {
    value: "",
    pageNum: 1,
    pageSize: 10
  };
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeEquipDialog");
};
</script>
<style lang="scss" scoped>
.equip-dialog-wrap {
  .equip-dialog-content {
    :deep(.px-form) {
      width: 100%;
      .px-form-item {
        width: 100%;
        margin-right: 0;
        .px-input {
          width: 100%;
        }
      }
    }
    .equip-dialog-btn {
      :deep(.px-button + .px-button) {
        margin-left: 8px;
      }
    }
    .equip-table {
      --px-table-border-color: #dfdfdf;
      :deep(.px-table__header) {
        thead {
          tr {
            background-color: #e7eefb !important;
            th {
              font-size: 13px;
              font-weight: bold;
              color: #000;
              background-color: #e7eefb !important;
            }
          }
        }
      }
      :deep(.px-table__cell) {
        padding: 0;
        height: 36px;
        line-height: 36px;

        .cell {
          height: 36px;
          line-height: 36px;
        }
      }
      :deep(.allSelectDisable .cell) {
        visibility: hidden;
      }
    }
    :deep(.px-pagination) {
      right: 32px;
    }
  }
}
</style>
